<template>
	<view class="rotate-for-portrait" :style="{backgroundImage:'url('+knowMeBg+')'}" @click="payScl()" v-if="!orientation">
		<!-- <image :src="knowMeBg" mode="aspectFill" class="knowme-bg"></image> -->
		<image :src="noRotation" mode="" class="no-rotation"></image>
		<image :src="knowMeBtn1" mode="" class="knowme-btn" v-show="isShowBtn"></image>
		<image :src="knowMeBtn2" mode="" class="knowme-btn" v-show="!isShowBtn"></image>
		<image :src="knowMeFlashP" mode="" class="knowme-flash-p"></image>
		<image :src="knowMeArrow" mode="" class="knowme-arrow"></image>
	</view>
	<view class="" v-else style="width: 100%;padding-top: 200rpx;color: brown;font-size: 34rpx;text-align: center;">
		{{orientation}}
	</view>
</template>

<script>
	const imgBaseURL = 'https://webstatic.feifanxinli.com/public_test/images/knowme'
	import {
		get_scl_info,
		payMoney
	} from '@/common/api/scl_api.js'
	export default {
		data() {
			return {
				isShowBtn: false,
				knowMeArrow: imgBaseURL + '/splash/knowMeArrow.png',
				knowMeBg: imgBaseURL + '/splash/knowMeBg.jpg',
				knowMeBtn1: imgBaseURL + '/splash/knowMeBtn1.png',
				knowMeBtn2: imgBaseURL + '/splash/knowMeBtn2.png',
				knowMeFlashP: imgBaseURL + '/splash/knowMeFlashP.png',
				noRotation: imgBaseURL + '/splash/noRotation.png',
				initInterval: null,
				paramObj: null,
				detail:null,
				orientation:''
			}
		},
		created() {
			this.initInterval = setInterval(() => {
				this.isShowBtn = !this.isShowBtn
			}, 260)
		},
		onShow() {
			// 监听屏幕方向变化
			uni.onWindowResize((res) => {
				if (res.size.windowWidth > res.size.windowHeight) {
					this.orientation = '请锁定屏幕并保持竖屏完成测评';
					// this.$showToast('横屏模式')
					// 在这里处理横屏逻辑
				} else {
					this.orientation = '';
					// this.$showToast('竖屏模式')
					// 在这里处理竖屏逻辑
				}
			});
		},
		onUnload(){
			uni.offWindowResize();
		},
		onLoad(options) {
			this.paramObj = JSON.parse(options.paramObj)
			get_scl_info({
				sclId: this.paramObj.sclId,
				userId: this.paramObj.userId
			}).then(res => {
				
				this.detail = res.data.data;
				if (this.paramObj.userType && this.paramObj.userType == 'freeScl') {
					this.detail.discountPrice = 0;
				}
				//h5支付未做 后续补充h5支付
				// #ifndef MP-WEIXIN
				this.detail.discountPrice = 0;
				// #endif
				
				this.$u.api.addLog({
					sclId: this.paramObj.sclId,
					sourseType: this.detail.addSclWay == 1 ? 9 : 0
				})
			})

			// {
			// 	sclId: options.wxTest_sclId,
			// 	userType: options.wxTest_userType,
			// 	jsonStr: options.wxTest_jsonStr,
			// 	userId: options.wxTest_userId
			// }
			uni.setStorageSync('userInfoCP', {
				userId: options.wxTest_userId
			})
		},
		onUnload() {
			clearInterval(this.initInterval)
			this.initInterval = null;
		},
		methods: {
			goTest(testAfterPay) {
				testAfterPay = testAfterPay || 'no'
				let questionFullBg = this.fullPageData && this.fullPageData.questionFullBg ? this.fullPageData
					.questionFullBg : '';
				if (this.pageType == 'full' || (this.detail.isSpecial && this.detail.isSpecial == 'Y')) {
					uni.navigateTo({
						url: '/subcontractorC/pages/sclIntroduce/knowMe/test?sclId=' + this.paramObj.sclId +
							'&userType=' + this.paramObj.userType +
							'&questionFullBg=' + questionFullBg + '&testAfterPay=' + testAfterPay + '&jsonStr=' +
							this.paramObj.jsonStr
					})
				} else {
					uni.navigateTo({
						url: '/subcontractorC/pages/sclIntroduce/knowMe/test?sclId=' + this.paramObj.sclId +
							'&userType=' + this.paramObj.userType +
							'&testAfterPay=' + testAfterPay + '&jsonStr=' + this.paramObj.jsonStr
					})
				}
			},
			payScl() {
				if (this.detail.newOriginalPrice == 0 || this.detail.extPay ==
					'1' || (this.detail.residueFreeTimes && this.detail.residueFreeTimes > 0)) {
					this.goTest();
					return
				}
				//isBeforePay  1是在测试前支付   0是在测试后提交答题时支付
				if (this.detail.isBeforePay && this.detail.isBeforePay == '0') {
					this.goTest('yes');
					return
				}
				let this_ = this;
				payMoney({
					id: this.paramObj.sclId
				}).then(res => {
					uni.requestPayment({
						provider: 'wxpay',
						service: 5, //直接拉起微信支付
						orderInfo: res.data, //抖音支付信息
						timeStamp: res.data.timeStamp,
						nonceStr: res.data.nonceStr,
						package: res.data.packageValue,
						signType: res.data.signType,
						paySign: res.data.paySign,
						success(res) {
							if (res.errMsg == 'requestPayment:ok') {
								this_.goTest();
							} else {
								this_.$showToast('支付取消');
							}
						},
						fail: function(err) {
							console.log(err)
							this_.$showToast('支付失败');
						}
					});
				})
			}
		}
	}
</script>
<style>
	.knowme-flash-p {
		width: 980rpx;
		height: 750rpx;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		animation: shanshuo .8s infinite;
	}

	.knowme-arrow {
		width: 184rpx;
		height: 152rpx;
		position: absolute;
		left: 830rpx;
		top: 430rpx;
		animation: fadeIn 2.8s;
	}

	.no-rotation {
		width: 100rpx;
		height: 750rpx;
		position: absolute;
		top: 0;
		left: 0;
	}

	.knowme-btn {
		width: 296rpx;
		height: 306rpx;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	.rotate-for-portrait {
		transform: rotate(90deg);
		transform-origin: top left;
		width: 100vh;
		/* 原来的高度 */
		height: 750rpx;
		/* 原来的宽度 */
		position: fixed;
		top: 0;
		left: 100%;
		background-size: cover;
		background-position: center;
	}

	@keyframes shanshuo {
		0% {
			opacity: 0;
		}

		50% {
			opacity: 1;
		}

		100% {
			opacity: 0;
		}
	}

	@keyframes fadeIn {
		0% {
			left: 100vh;
			top: 750rpx;
		}

		100% {
			left: 830rpx;
			top: 430rpx;
		}
	}
</style>